import React, { useState, useMemo } from 'react'
import { Sidebar, Toast } from 'react-vant';
import '../App.css'

export default function FenLei() {

  const [active, setActive] = useState(1);

  //数据
  const list = [
    {
      id: 1,
      name: '小米手机',
      subItems: [
        {
          id: '1-1',
          name: '小米11',
          img: '../../public/img/下载 (1).jpg'
        },
        {
          id: '1-2',
          name: '小米22',
          img: '../../public/img/下载 (1).jpg'
        },
        {
          id: '1-3',
          name: '小米33',
          img: '../../public/img/下载 (1).jpg'
        },
      ]
    },
    {
      id: 2,
      name: '红米手机',
      subItems: [
        {
          id: '2-1',
          name: '红米11',
          img: '../../public/img/下载 (2).jpg'
        },
        {
          id: '2-2',
          name: '红米22',
          img: '../../public/img/下载 (2).jpg'
        },
        {
          id: '2-3',
          name: '红米33',
          img: '../../public/img/下载 (2).jpg'
        },
      ]
    },
    {
      id: 3,
      name: '游戏手机',
      subItems: [
        {
          id: '3-1',
          name: '游戏手机11',
          img: '../../public/img/下载 (3).jpg'
        },
        {
          id: '3-2',
          name: '游戏手机22',
          img: '../../public/img/下载 (3).jpg'
        },
        {
          id: '3-3',
          name: '游戏手机33',
          img: '../../public/img/下载 (3).jpg'
        },
      ]
    },
    {
      id: 4,
      name: '其他爱情',
      subItems: [
        {
          id: '4-1',
          name: '其他爱情11',
          img: '../../public/img/下载 (4).jpg'
        },
        {
          id: '4-2',
          name: '其他爱情22',
          img: '../../public/img/下载 (4).jpg'
        },
        {
          id: '4-3',
          name: '其他爱情33',
          img: '../../public/img/下载 (4).jpg'
        },
      ]
    },
    {
      id: 5,
      name: '完全不会',
      subItems: [
        {
          id: '5-1',
          name: '完全不会11',
          img: '../../public/img/下载 (5).jpg'
        },
        {
          id: '5-2',
          name: '完全不会22',
          img: '../../public/img/下载 (5).jpg'
        },
        {
          id: '5-3',
          name: '完全不会33',
          img: '../../public/img/下载 (5).jpg'
        },
      ]
    },
    {
      id: 6,
      name: '太难了啊',
      subItems: [
        {
          id: '6-1',
          name: '太难了啊11',
          img: '../../public/img/下载 (6).jpg'
        },
        {
          id: '6-2',
          name: '太难了啊22',
          img: '../../public/img/下载 (6).jpg'
        },
        {
          id: '6-3',
          name: '太难了啊33',
          img: '../../public/img/下载 (6).jpg'
        },
      ]
    },
  ]

  /* 获取list子级数据 */
  const zi = useMemo(() => {
    return list.map((p) => p.subItems)
  }, [list])

  const [current, setCurrect] = useState(0)
  const liang = (index: number) => {

  }


  return (
    <>

      <div style={{
        display: 'flex', justifyContent: 'space-between',
        width: '100%', height: '100v', marginTop: '40px'
      }}>
        {/* 渲染左侧导航栏 */}
        <div className='left'>
          {
            list.map((q, index) => {
              return (
                <div key={q.id} style={{ padding: '10px', lineHeight: '35px' }}>
                  {q.name}
                </div>
              )
            })
          }
        </div>
        {/* 渲染右侧数据 */}
        <div className='right'>
          {
            zi.map((item, index) => {
              return (
                <div key={index} style={{ height: '300px' }} className='right-item'>
                  {
                    item.map((p) => {
                      return (
                        <div key={p.id}>
                          <img src={p.img} alt="" style={{ width: '80px', height: '80px', objectFit: 'cover' }} />
                          <div>{p.name}</div>
                        </div>
                      )
                    })
                  }
                </div>
              )
            })
          }
        </div>
      </div>
    </>
  )
}
